<script setup lang="ts">
import MenuTree from '~/pages/setting/components/menu-tree.vue'
import type { MenuResp } from '~/api/setting/model/menu.ts'

import MenuApiList from '~/pages/setting/components/menu-api-list.vue'
import MenuApiNomenuList from '~/pages/setting/components/menu-api-nomenu-list.vue'
import MenuComponentList from '~/pages/setting/components/menu-component-list.vue'

const route = useRoute()

const activeTabKey = shallowRef('app')
const tabList = [
  {
    key: 'component',
    tab: '组件列表',
  },
  {
    key: 'api',
    tab: '接口列表',
  },
  {
    key: 'apiNoMenu',
    tab: '接口入库',
  },
]

const menuComponentRef = ref()
const menuApiRef = ref()

const menuResp = shallowRef<MenuResp>({})

function onTabChange(value: string) {
  activeTabKey.value = value
}

function onItemSelect(selected, node) {
  menuResp.value = node
  if (activeTabKey.value === 'component') {
    menuComponentRef.value?.refreshData(selected, node)
  } else {
    menuApiRef.value?.refreshData(selected, node)
  }
}

onMounted(() => {
  activeTabKey.value = 'component'
  if (route?.query?.id && route?.query?.type) {
    menuResp.value.id = `${route?.query?.id}`
    menuResp.value.type = Number(`${route?.query?.type}`)
  }
})
</script>

<template>
  <page-container>
    <a-space direction="vertical" size="large" class="w-full">
      <a-row :gutter="24">
        <a-col :span="6">
          <MenuTree :menu-id="`${route?.query?.id}`" @on-item-select="onItemSelect" />
        </a-col>
        <a-col :span="18">
          <a-card
            :tab-list="tabList"
            :active-tab-key="activeTabKey"
            class="component-card"
            @tab-change="key => onTabChange(key)"
          >
            <MenuComponentList
              v-if="activeTabKey === 'component'"
              ref="menuComponentRef"
              :menu-data="menuResp"
            />
            <MenuApiList
              v-else-if="activeTabKey === 'api'"
              ref="menuApiRef"
              :menu-data="menuResp"
            />
            <MenuApiNomenuList
              v-else-if="activeTabKey === 'apiNoMenu'"
              ref="menuApiRef"
              :menu-data="menuResp"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </page-container>
</template>

<style scoped lang="less">
.component-card {
  min-height: 480px;
}
.input-search {
  margin-bottom: 16px;
  width: 300px;
}
.processing-tag {
  width: 72px;
}
</style>
